html,body{
	font-family: sans-serif;
	font-size: 16px;
	outline: none;
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
	color: blue;
}

.page{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: none;
}

.game-title{
	font-size: 4rem;
	color: #f2783e;
	text-align: center;
	margin-top: 42%;
	text-shadow: 4px 4px 0 #fff;
}

#toast{
	display: none;
	bottom: 10%;
	background: rgba(0,0,0,.5);
	color: #fff;
	padding: 12px 24px;
	border-radius: 6px;
	position: fixed;
}

#start_page .btns{
	margin-top: 23%;
}

#start_page .btns a{
	color: #fff;
	display: block;
	text-decoration: none;
	width: 30%;
	height: 42px;
	line-height: 42px;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 16px;
	font-size: 1.1rem;
	border-radius: 4px;
}

#login{
	background: #45e06a;
}

#reg{
	background: #da9040;
}

.login-form{
	width: 70%;
	margin: 0 auto;
	box-sizing: border-box;
	margin-top: 10%;
}

.login-form h1{
	color: #555;
}

.login-form input{
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: solid 1px #555;
	height: 30px;
	text-indent: 12px;
	outline: none;
	border-radius: 6px;
}

.login-form input:focus{
	border-color: #2687ff;
}

#loginbtn,#regbtn{
	display: block;
	height: 42px;
	line-height: 42px;
	color: #fff;
	background: #27de3f;
	font-size: 1.1rem;
	width: 120px;
	border-radius: 6px;
	text-align: center;
}
#regbtn{
	background: #de3c20;
}

.tabs{
	overflow: hidden;
	background: #fe899a;
}
.tabs a{
	float: left;
	width: 25%;
	box-sizing: border-box;
	text-align: center;
	height: 42px;
	line-height: 42px;
	color: #fff;
	border-bottom: solid 3px transparent;
}
.tabs a.on{
	border-color: #fff;
}

.tabpages > .p{
	display: none;
}

.container{
	margin: 12px;
	box-sizing: border-box;
	padding: 12px;
	background: rgba(240,240,240,.4);
	color: #555;
	overflow: hidden;
	border-radius: 3px;
}

.p_info{
	float: left;
	overflow: hidden;
}

#change_avatar{
	display: block;
	float: left;
	margin-left: 12px;
}

#change_avatar img{
	display: block;
	height: 62px;
	width: 62px;
	border: solid 2px #fff;
}

.p_i{
	float: left;
	margin-left: 12px;
	overflow: hidden;
}

.p_name,.p_cup{
	height: 31px;
	line-height: 31px;
}

.p_cup{
	padding-left: 32px;
	background: url(/image/cup.svg) no-repeat 2px center;
	background-size: 24px 24px;
	color: #fff;
}

.p_name{
	color: #fff;
	clear: left;
}

.p_level{
	color: #fea033;
	margin-right: 12px;
}

.p_gstatics{
	float: right;
	background: #4a303f;
	color: #fff;
	padding: 6px 24px;
	border-radius: 5px;
}
.p_gstatics div{
	height: 26px;
	line-height: 26px;
}

.p_gstatics span{
	margin: 0 6px;
}

.p_exp{
	float: left;
	height: 3px;
	background: #255263;
	width: 200px;
	margin-top: 12px;
	margin-left: 12px;
	border-radius: 2px;
	overflow: hidden;
}
.p_exp div{
	height: 100%;
	background: #fff;
	float: left;
}

#addnewdeck{
	display: block;
	width: 60%;
	height: 40px;
	line-height: 40px;
	color: #fff;
	background: #2ed556;
	margin: 0 auto;
	text-align: center;
	border-radius: 5px;
}

.decklist{
	padding: 12px;
}

.decklist div{
	overflow: hidden;
	margin-bottom: 12px;
}

.decklist div a{
	margin-right: 6px;
	box-sizing: border-box;
	display: block;
	border-radius: 5px;
}
.decklist div a:last-of-type{
	margin: 0;
}
.decklist .title{
	line-height: 40px;
	height: 40px;
	background: #758a9c;
	width: calc(100% - 192px);
	box-sizing: border-box;
	text-indent: 12px;
	color: #fff;
}
.decklist .seton,
.decklist .delete{
	width: 80px;
	height: 40px;
	line-height: 40px;
	float: right;
	margin-left: 6px;
	color: #fff;
	text-align: center;
}

.decklist .delete{
	background: #fe453d;
}
.decklist .seton{
	background: #2576fd;
}
.decklist .seton.off{
	background: #dedede;
}